<template>
    <div>
        <Modal v-model="modal.add" title="添加" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('addForm', $event)" width="1020">
            <Form ref="addForm" :model="form" :label-width="120" :rules="validateRules">
              <FormItem prop="parentName"></FormItem>
<FormItem label="类别父编号" prop="parentId">
	<!-- <InputNumber v-model="form.parentId" placeholder="请输入类别父编号" style="width: 100%;"/> -->
              <span v-text="form.parentId"></span>
              -
              <span v-text="form.parentName"></span>
              &nbsp;
              <Button @click="showModal('choice')" type="text" style="color: #108EE9;">选择父类别</Button>&nbsp;
              <Button @click="setTopCategory" type="text" style="color: #fa436a;">设置顶级类别</Button>&nbsp;
</FormItem>
	<FormItem label="类别名称" prop="title">
	<Input v-model="form.title" placeholder="请输入类别名称" clearable/>
</FormItem>
<FormItem label="类别描述" prop="description">
	  <Input type="textarea" :autosize="descriptionAutoSize"  v-model="form.description"  placeholder="请输入类型描述" clearable/>
</FormItem>

            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="resetFormCancelModal('addForm', 'add')">取消</Button>
                <Button type="primary" size="large" @click="add" :loading="loading.add">添加</Button>
            </div>
        </Modal>
        <Modal v-model="modal.edit" title="修改" :mask-closable="false" @on-visible-change="changeModalVisibleResetForm('editForm', $event)" width="1020">
            <Form ref="editForm" :model="form" :label-width="120" :rules="validateRules">
                <FormItem prop="parentName"></FormItem>
<FormItem label="类别父编号" prop="parentId">
	<!-- <InputNumber v-model="form.parentId" placeholder="请输入类别父编号" style="width: 100%;"/> -->
              <span v-text="form.parentId"></span>
              -
              <span v-text="form.parentName"></span>
              &nbsp;
              <Button @click="showModal('choice')" type="text" style="color: #108EE9;">选择父类目</Button>&nbsp;
              <Button @click="setTopCategory" type="text" style="color: #fa436a;">设置顶级类目</Button>&nbsp;
</FormItem>
	<FormItem label="类别名称" prop="title">
	<Input v-model="form.title" placeholder="请输入类别名称" clearable/>
</FormItem>
<FormItem label="类别描述" prop="description">
	  <Input type="textarea" :autosize="descriptionAutoSize"  v-model="form.description"  placeholder="请输入类型描述" clearable/>
</FormItem>

            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="resetFormCancelModal('editForm', 'edit')">取消</Button>
                <Button type="primary" size="large" @click="edit" :loading="loading.edit">修改</Button>
            </div>
        </Modal>

        <Modal v-model="modal.choice" title="选择父类别" :mask-closable="false" width="1020">
          <ArticleCategoryMainSingle ref="articleCategoryMainSingle" v-on:confirmChoice="confirmChoice" />
          <div slot="footer">
            <Button type="text" size="large" @click="cancelModal('choice')">取消</Button>
            <Button type="primary" size="large" @click="bottomConfirmChoice">确认选择</Button>
          </div>
        </Modal>
    </div>
</template>

<script>
    import ArticleCategoryMainSingle from './ArticleCategoryMainSingle.vue'
    export default {
        name: 'ArticleCategoryAddEdit',
        components: {
          ArticleCategoryMainSingle
        },
        data() {
            return {
                modal: {
                    add: false,
                    edit: false,
                    choice: false
                },
                loading: {
                    add: false,
                    edit: false
                },
                urls: {
                    addUrl: '/article-category/admin/save',
                    batchAddUrl: '/article-category/admin/batch-save',
                    editUrl: '/article-category/admin/update',
                    batchEditUrl: '/article-category/admin/batch-update'
                },
                form: {
                    id: null,
parentId: 0,
parentName: '顶级类别',
title: null,
description: null,


                },
                validateRules: {
                    parentId: [
{type: 'integer', required: true, message: '此项为必须项', trigger: 'blur, change'}
],
title: [
{type: 'string', required: true, message: '此项为必须项', trigger: 'blur'},
{type: 'string', min: 1, max: 20, message: '必须1-20个字符', trigger: 'blur'}
],
description: [
{type: 'string', min: 1, max: 255, message: '必须1-255个字符', trigger: 'blur'}
],

                },
                descriptionAutoSize: {
                  minRows: 3,
                  maxRows: 5
                }
            }
        },
        computed: {},
        mounted() {},
        methods: {
            changeModalVisibleResetForm(formRef, visible) {
                if (!visible) {
					        this.$refs[formRef].resetFields()
					        this.form.id = null
                }
            },
            resetFormCancelModal(formRef, modal) {
                this.modal[modal] = false
				        this.$refs[formRef].resetFields()
				        this.form.id = null
            },
            add() {
                this.$emit('add')
            },
            edit() {
                this.$emit('edit')
            },
            showModal(modal) {
              if (modal === 'choice') {
                let articleCategoryMainSingle = this.$refs.articleCategoryMainSingle
                let selectedData = [{
                  categoryId: this.form.parentId
                }]
                articleCategoryMainSingle.selectedData = selectedData
                articleCategoryMainSingle.selectedDataIdProp = 'categoryId'
                articleCategoryMainSingle.searchTable(true)
              }
              this.modal[modal] = true
            },
            cancelModal(modal) {
              this.modal[modal] = false
            },
            /**
             * 底部的确认选择父级类目
             */
            bottomConfirmChoice() {
              this.$refs.articleCategoryMainSingle.confirmSelection()
            },
            /**
             * 确认选择父级类目
             */
            confirmChoice(row) {
              this.cancelModal('choice')
              this.form.parentId = row.id
              this.form.parentName = row.title
            },
            /**
             * 设置为顶级类目
             */
            setTopCategory() {
              this.form.parentId = 0
              this.form.parentName = '顶级类别'
            }
        }
    }
</script>

<style>
</style>
